<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RHILEX Terminal</title>
    <!-- 引入 xterm.css -->
    <link rel="stylesheet" href="https://unpkg.com/xterm@4.19.0/css/xterm.css">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Ubuntu Mono', monospace;
            background-color: #2E3436;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        /* 终端窗口样式 */
        .terminal-window {
            width: 80%;
            height: 80%;
            min-width: 300px;
            min-height: 200px;
            background-color: #000;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* 标题栏样式，模拟 Ubuntu Terminal 标题栏 */
        .title-bar {
            height: 30px;
            background-color: #343434;
            display: flex;
            align-items: center;
            padding: 0 10px;
            cursor: move;
            user-select: none;
            color: #fff;
        }

        /* 标题样式 */
        .title {
            margin: 0;
            flex-grow: 1;
        }

        /* 连接状态标志样式 */
        .connection-status {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
        }

        /* 连接成功状态颜色 */
        .connected {
            background-color: #73d216;
        }

        /* 连接失败状态颜色 */
        .disconnected {
            background-color: #cc0000;
        }

        /* 输入框容器样式 */
        .input-container {
            display: flex;
            align-items: center;
            padding: 5px;
            background-color: #343434;
        }

        /* 输入框样式 */
        .input-container input {
            flex-grow: 1;
            margin-right: 5px;
            background-color: #000;
            color: #fff;
            border: 1px solid #444;
            padding: 3px;
        }

        /* 按钮样式 */
        .input-container button {
            background-color: #444;
            color: #fff;
            border: none;
            padding: 3px 10px;
            cursor: pointer;
        }

        /* 终端内容区域样式 */
        .terminal-content {
            flex-grow: 1;
            overflow: hidden;
        }

        /* About 按钮样式 */
        .about-button {
            background-color: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
        }

        /* About 弹窗样式 */
        .about-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        /* About 弹窗内容样式 */
        .about-content {
            background-color: #343434;
            padding: 20px;
            border-radius: 5px;
            color: #fff;
        }

        /* 关闭按钮样式 */
        .close-button {
            background-color: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            float: right;
        }

        /* 重连按钮样式 */
        .reconnect-button {
            background-color: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
        }

        /* 错误弹窗样式 */
        .error-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #343434;
            padding: 20px;
            border-radius: 5px;
            color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        /* Toast 提示样式 */
        .toast {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #73d216;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    </style>
    <!-- 引入 xterm.js 和 xterm-addon-fit.js -->
    <script src="https://unpkg.com/xterm@4.19.0/lib/xterm.js"></script>
    <script src="https://unpkg.com/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js"></script>
</head>

<body>
    <!-- 终端窗口 -->
    <div class="terminal-window">
        <!-- 标题栏 -->
        <div class="title-bar">
            <h2 class="title">RHILEX Terminal</h2>
            <div class="connection-status disconnected"></div>
            <button class="reconnect-button" onclick="reconnect()">重连</button>
            <button class="about-button" onclick="openAboutModal()">About</button>
        </div>
        <!-- 输入框容器 -->
        <div class="input-container">
            <input type="text" id="url-input" value="ws://127.0.0.1:2579/ws">
            <button onclick="connect()">连接</button>
        </div>
        <!-- 终端内容区域 -->
        <div class="terminal-content" id="terminal"></div>
        <!-- About 弹窗 -->
        <div class="about-modal" id="about-modal">
            <div class="about-content">
                <button class="close-button" onclick="closeAboutModal()">&times;</button>
                <p>更多信息请访问 <a href="https://www.hootrhino.com" style="color: aliceblue;"
                        target="_blank">https://www.hootrhino.com</a></p>
            </div>
        </div>
        <!-- 错误弹窗 -->
        <div class="error-modal" id="error-modal">
            <p id="error-message"></p>
            <button onclick="closeErrorModal()">关闭</button>
        </div>
        <!-- Toast 提示 -->
        <div class="toast" id="toast">连接成功！</div>
    </div>
    <script>
        // 初始化 xterm 终端
        const terminal = new Terminal();
        const fitAddon = new window.FitAddon.FitAddon();
        terminal.loadAddon(fitAddon);
        terminal.open(document.getElementById('terminal'));

        let socket;
        let reconnecting = false;
        const statusElement = document.querySelector('.connection-status');
        const aboutModal = document.getElementById('about-modal');
        const urlInput = document.getElementById('url-input');
        const errorModal = document.getElementById('error-modal');
        const errorMessage = document.getElementById('error-message');
        const toast = document.getElementById('toast');

        // 连接函数
        function connect() {
            const url = urlInput.value;
            if (socket) {
                socket.close();
            }
            socket = new WebSocket(url);

            socket.onopen = () => {
                statusElement.classList.remove('disconnected');
                statusElement.classList.add('connected');
                showToast('连接成功！');

                // 连接成功后发送 ls 指令
                socket.send('ls\n');

                terminal.onData(data => {
                    socket.send(data);
                });
                reconnecting = false;
            };

            socket.onmessage = event => {
                terminal.write(event.data);
            };

            socket.onclose = (event) => {
                statusElement.classList.remove('connected');
                statusElement.classList.add('disconnected');
                if (event.wasClean) {
                    showErrorModal(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
                } else {
                    showErrorModal('Connection died');
                }
                if (!reconnecting) {
                    reconnecting = true;
                    setTimeout(() => connect(), 3000);
                }
            };

            socket.onerror = (error) => {
                showErrorModal(`WebSocket error: ${error.message}`);
                socket.close();
            };
        }

        // 重连函数
        function reconnect() {
            if (socket) {
                socket.close();
            }
            reconnecting = false;
            connect();
        }

        // 打开 About 弹窗函数
        function openAboutModal() {
            aboutModal.style.display = 'flex';
        }

        // 关闭 About 弹窗函数
        function closeAboutModal() {
            aboutModal.style.display = 'none';
        }

        // 显示错误弹窗函数
        function showErrorModal(message) {
            errorMessage.textContent = message;
            errorModal.style.display = 'block';
        }

        // 关闭错误弹窗函数
        function closeErrorModal() {
            errorModal.style.display = 'none';
        }

        // 显示 Toast 提示函数
        function showToast(message) {
            toast.textContent = message;
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 3000);
        }

        // 拖动窗口功能
        const titleBar = document.querySelector('.title-bar');
        let isDragging = false;
        let offsetX, offsetY;

        titleBar.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - titleBar.offsetLeft;
            offsetY = e.clientY - titleBar.offsetTop;
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                const terminalWindow = document.querySelector('.terminal-window');
                terminalWindow.style.left = (e.clientX - offsetX) + 'px';
                terminalWindow.style.top = (e.clientY - offsetY) + 'px';
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        // 自适应全屏行列
        window.addEventListener('resize', () => {
            fitAddon.fit();
        });

        // 初始连接
        connect();
    </script>
</body>

</html>